<template>
	<view class="history-box">
		<view class="teacher-name">
			<view class="name" @click="getTeachers()">我的导师<text>{{selectTeaItem.id?selectTeaItem.name:teacher_info.id?teacher_info.name:'选择导师'}}</text></view>
			<view class="tea-select">
                
                <text v-if="bindState==2" class="submit-bind" @click.stop="cancelBindTea()">解绑</text>
                <text v-else-if="bindState==1" class="cancel">审核中</text>
                <text v-else class="submit-bind" :style="{color: selectTeaItem.id?'#7f7f7f':'#d7d7d7'}" @click.stop="setBindTea(selectTeaItem.id)">提交</text>
                <!-- <uni-icons v-else type="right" size="32rpx" color="#999"></uni-icons> -->
            </view>
		</view>
		<view class="line" v-if="bindLog.length>0">
			————— 以下为历史结对消息 —————
		</view>
		<view class="history">
			<view v-for="log in bindLog" :key="log.id">
				<view class="item" v-if="log.state==1">
                    {{utils.dateFormat(log.addTime.split(' ')[0])}}号，我已向{{log.name}}老师提交{{log.type==1?'绑定':'解绑'}}申请
                </view>
                <view v-else class="item">{{utils.dateFormat(log.addTime.split(' ')[0])}}号，{{log.name}}老师{{log.state==2?'通过':'拒绝'}}我的{{log.type==1?'结对':'解绑'}}申请</view>
			</view>
		</view>
        <uni-transition mode-class="fade"
			:styles="utils.transitionStyles.bg" :show="select_tea" @click="closePopup">
		</uni-transition>
		<uni-transition :mode-class="['slide-bottom']"
			:styles="select_class"
			:show="select_tea">
			<view class="select-tea">
				<!-- <view class="select-head">
					<view class="wk-btn" @click.stop="closePopup">取消</view>
					<view class="wk-btn" :style="{'color':'#6ba1ff'}" @click="setBindTea(selectTeaId)">确定</view>
				</view> -->
				<view class="search-box">
					<input type="text" :value="search_value" @input="searchValue" placeholder="请输入导师名字" />
					<text @click="getTeachers()">搜索</text>
				</view>
				<scroll-view :scroll-top="0" style="height: 600rpx;" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<view class="list">
						<view :class="['item', {'active': selectTeaItem.id==teacher.id}]" v-for="(teacher, i) in teachers_list" :key="i" @click="selectTea(teacher)">
							{{teacher.name}}
						</view>
					</view>
					<uni-load-more :status="more"></uni-load-more>
				</scroll-view>
				
			</view>
		</uni-transition>
	</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
    components: {
        uniLoadMore
    },
	data() {
		return {
            page: 1,
            more: 'more',
            search_value: '',
			teacher_info: {},
			bindState: -1,
			bindLog: [],
            teachers_list: [],
            selectTeaItem: {},
            select_tea: false,
            select_class: {
                position: 'absolute',
                width: '100%',
                bottom: '0',
                left: 0,
                height: '760rpx',
                'z-index': 9
            }
		}
	},
    onLoad(){
        this.bindTeacher()
        uni.$on('noticeListener', this.bindTeacher)
    },
    onUnload(){
        uni.$off('noticeListener', this.bindTeacher)
    },
	methods: {
        getTeachers(){
				
            this.page = 1;
            this.teachers_list = [];
            this.findTeachers();
        },
        selectTea(item){
            this.selectTeaItem = item;
            this.closePopup();
        },
        findTeachers(){
            if(this.bindState==1 || this.bindState == 2) return;
            this.more = 'loading';
            this.api.get('sBindTeacher/findTeachers', {
                curPage: this.page,
                pageSize: 10,
                keyWord: this.search_value||''
            }).then(res=>{
                let list = res.data.teachers.list;
                this.teachers_list = this.teachers_list.concat(list);
                this.select_tea = true;
                if(list.length<10){
                    this.more = 'no-more';
                }
            })
        },
		bindTeacher(){
			this.api.get('sBindTeacher/findBindTeacher').then(res=>{
				this.teacher_info = res.data.teacher || {};
				this.bindState = res.data.bindState;
				this.bindLog = res.data.bindLog;
                let itemObj = this.bindLog[0] || {}
                if(this.teacher_info.id&&itemObj.state==1&&itemObj.logType!=2){
                    this.bindState = 1
                }
			})
        },
        setBindTea(teacherId){
            if(!teacherId) return
            let that = this;
            this.utils.showModal('', `确定提交与${that.selectTeaItem.name}老师的结对关系？`, this.stuBindTea)
            
        },
        stuBindTea(){
            this.api.post('sBindTeacher/stuBindTea', {
                teacherId: this.selectTeaItem.id
            }).then(res=>{
                if(res.data.state == 'ok'){
                    uni.showToast({
                        title: '已提交审核',
                        duration: 2000,
                        icon: 'none',
                        mask: true,
                        position: 'bottom'
                    })
                    this.selectTeaItem = {};
                    setTimeout(()=>{
                        this.bindTeacher();
                    }, 1000)
                }
                
            })
        },
        cancelBindTea(){
            let that = this;
            this.utils.showModal('', `确认取消绑定${that.teacher_info.name}老师吗`, this.confirmCancel)
        },
        confirmCancel(){
            this.api.post('sBindTeacher/stuCancelBindTea', {
                teacherId: this.teacher_info.id
            }).then(res=>{
                if(res.data.state == 'ok'){
                    this.bindTeacher()
                }
            })
        },
        lower(){
            if(this.more == 'no-more') return;
            this.page ++;
            this.findTeachers()
        },
        searchValue(eve){
            this.search_value = eve.detail.value;
        },
        closePopup(){
            this.search_value = '';
            this.select_tea = false;
        },
	}
}
</script>
<style lang="less" scoped>
	.history-box{
		padding: 24rpx 0;
		background-color: #fafafa;
		min-height: 100vh;
		.line{
			margin-top: 80rpx;
			margin-bottom: 60rpx;
			color: #aaa;
			text-align: center;
		}
		.history{
			padding: 0 32rpx;
		}
		.item{
			margin-bottom: 40rpx;
		}
	}
	.teacher-name{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		background-color: #fff;
		padding: 0 32rpx;
		position: relative;
		&::after{
			content: '';
			position: absolute;
			bottom: 0;
			left: 20rpx;
			height: 2rpx;
			right: 20rpx;
			background-color: #d7d7d7;
		}
		.name{
			font-size: 28rpx;
			font-weight: 700;
			text{
				margin-left: 40rpx;
				font-weight: normal;
				font-size: 24rpx;
			}
		}
		.btn{
			display: inline-block;
			width: 108rpx;
			height: 44rpx;
			text-align: center;
			line-height: 44rpx;
			border-radius: 10rpx;
			font-size: 26rpx;
			border: 2rpx solid #d7d7d7;
		}
        .tea-select{
            font-size: 24rpx;
        }
        .cancel{
            margin-left: 16rpx;
            color: #55acee;
        }
        .submit-bind{
            margin-left: 16rpx;
            border: 2rpx solid #e4e4e4;
            border-radius: 8rpx;
            padding: 8rpx 24rpx;
            font-size: 24rpx;
            
        }
	}
</style>